//上架清点
<template>
  <div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        size="small"
        style="margin-top: 20px"
        :data-source="chargesData"
        :pagination="false"
        bordered
      >
        <a-table-column
          key="ruleName"
          data-index="ruleName"
          align="center"
          width="12%"
        >
          <span slot="title">名称</span>
          <template slot-scope="text, record">
            <div>
              {{ record.ruleName }}
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="baseWeight"
          data-index="baseWeight"
          align="center"
          width="12%"
        >
          <span slot="title">SKU范围</span>
          <template slot-scope="text, record">
            <div>
              {{ record.skuLeft + "~" + record.skuRight }}
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="skuPrice"
          data-index="skuPrice"
          align="center"
          width="12%"
        >
          <span slot="title">基础价格</span>
          <template slot-scope="text, record">
            <span>
              {{ record.skuPrice }}
            </span>
          </template>
        </a-table-column>
        <a-table-column
          key="skuUnit"
          data-index="skuUnit"
          align="center"
          width="12%"
        >
          <span slot="title">单位</span>
          <template slot-scope="text, record">
            <div>
              {{ record.skuUnit }}
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="handle"
          data-index="handle"
          align="center"
          width="50%"
        >
          <span slot="title">应用</span>
          <template slot-scope="text, record">
            <div class="tab-handle">
              <div>
                <a-checkbox
                  @change="(e) => onChangeUndertakes(e, record)"
                  :checked="record.oneSend == '0'"
                  :disabled="look == 'look'"
                >
                  代发
                </a-checkbox>
                <a-input-number
                  placeholder="代发百分比"
                  :min="0"
                  :disabled="record.oneSend != '0' || look == 'look'"
                  v-model="record.oneSendRatio"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />
              </div>
              <div>
                <a-checkbox
                  @change="(e) => onChangeTransport(e, record)"
                  :checked="record.transport == '0'"
                  :disabled="look == 'look'"
                >
                  转运
                </a-checkbox>
                <a-input-number
                  placeholder="转运百分比"
                  :min="0"
                  :disabled="record.transport != '0' || look == 'look'"
                  v-model="record.transportRatio"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />
              </div>
              <div>
                <a-checkbox
                  @change="(e) => onChangeRecommend(e, record)"
                  :checked="record.recommend == '0'"
                  :disabled="look == 'look'"
                >
                  退件
                </a-checkbox>
                <a-input-number
                  placeholder="退件百分比"
                  :min="0"
                  :disabled="record.recommend != '0' || look == 'look'"
                  v-model="record.recommendRatio"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />
              </div>
              <div>
                <a-checkbox
                  @change="(e) => onChangeWorkOrder(e, record)"
                  :checked="record.workOrder == '0'"
                  :disabled="look == 'look'"
                >
                  工单
                </a-checkbox>
                <a-input-number
                  placeholder="代发百分比"
                  :min="0"
                  :disabled="record.workOrder != '0' || look == 'look'"
                  v-model="record.workOrderRatio"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />
              </div>
            </div>
          </template>
        </a-table-column>
      </a-table>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              (props) =>
                ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchData.current"
            :total="total * 1"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
      <div class="footer">
        <a-button @click="cancel" style="margin-right: 20px">取消</a-button>
        <a-button
          type="primary"
          @click="nextOk"
          :disabled="isSubmit"
          :loading="loading"
          v-if="look != 'look'"
          >下一步</a-button
        >
      </div>
    </a-spin>
  </div>
</template>

<script>
import {
  cost_searchRules,
  cost_addOrEditRules,
} from "@/apis/system/setManage/setRules";
export default {
  props: ["activeKey", "modalFlag", "parentData", "look"],
  watch: {
    activeKey: {
      handler(newName) {
        if (newName == 5) {
          this.searchRuleList();
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      loading: false,
      isSubmit: true,
      searchData: {
        size: 10,
        current: 1,
      },
      total: 5,
      chargesData: [],
      spinning: false,
      broData: {},
    };
  },
  mounted() {
    this.$bus.$off("broData");
    this.$bus.$on("broData", (broData) => {
      this.broData = broData;
    });

    this.searchRuleList();
  },
  methods: {
    async searchRuleList() {
      this.spinning = true;
      if (this.modalFlag == "add") {
        if (!this.broData.sysChargingSchemeId) {
          this.$message.error("请先返回第一步创建方案！");
          setTimeout(() => {
            this.$emit("addRules");
          }, 50);
          return false;
        } else {
          this.isSubmit = false;
          this.spinning = false;
        }
      } else if (this.modalFlag == "edit") {
        this.isSubmit = false;
        let res = await cost_searchRules(
          this.parentData.sysChargingSchemeId,
          3,
          this.searchData
        );
        if (res.code == "200") {
          this.spinning = false;
          this.chargesData = res.responseBody.records;
          this.chargesData.forEach((item) => {
            if (item.skuUnit == "0") {
              item.skuUnit = "单";
            } else if (item.skuUnit == "1") {
              item.skuUnit = "个";
            } else if (item.skuUnit == "2") {
              item.skuUnit = "年";
            } else if (item.skuUnit == "3") {
              item.skuUnit = "箱";
            } else if (item.skuUnit == "4") {
              item.skuUnit = "拖";
            } else if (item.skuUnit == "5") {
              item.skuUnit = "箱+拖";
            } else if (item.skuUnit == "6") {
              item.skuUnit = "件";
            } else if (item.skuUnit == "7") {
              item.skuUnit = "张";
            } else if (item.skuUnit == "8") {
              item.skuUnit = "立方厘米";
            } else if (item.skuUnit == "9") {
              item.skuUnit = "立方米";
            } else if (item.skuUnit == "10") {
              item.skuUnit = "G";
            } else if (item.skuUnit == "11") {
              item.skuUnit = "KG";
            } else if (item.skuUnit == "12") {
              item.skuUnit = "LB";
            } else if (item.skuUnit == "13") {
              item.skuUnit = "inch";
            } else if (item.skuUnit == "14") {
              item.skuUnit = "cm";
            } else if (item.skuUnit == "15") {
              item.skuUnit = "m";
            } else if (item.skuUnit == "16") {
              item.skuUnit = "oz";
            } else if (item.skuUnit == "17") {
              item.skuUnit = "柜";
            } else if (item.skuUnit == "18") {
              item.skuUnit = "天";
            } else if (item.skuUnit == "19") {
              item.skuUnit = "小时";
            }
          });
          this.total = res.responseBody.total * 1;
          this.searchData.size = res.responseBody.size * 1;
        }
      }
    },

    //是否勾选代发
    onChangeUndertakes(e, record) {
      if (e.target.checked) {
        record.oneSend = "0";
      } else {
        record.oneSend = "1";
      }
    },
    //是否勾选转运
    onChangeTransport(e, record) {
      if (e.target.checked) {
        record.transport = "0";
      } else {
        record.transport = "1";
      }
    },
    //是否勾选退件
    onChangeRecommend(e, record) {
      if (e.target.checked) {
        record.recommend = "0";
      } else {
        record.recommend = "1";
      }
    },
    //是否勾选工单
    onChangeWorkOrder(e, record) {
      if (e.target.checked) {
        record.workOrder = "0";
      } else {
        record.workOrder = "1";
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber * 1;
      this.searchRuleList();
    },
    //页码变更
    showChange(current, size) {
      this.searchData.current = current * 1;
      this.searchData.size = size * 1;
      this.searchRuleList();
    },
    async nextOk() {
      this.loading = true;
      if (this.modalFlag == "add") {
        let res = await cost_addOrEditRules(
          this.broData.sysChargingSchemeId,
          3,
          this.chargesData
        );
        if (res.code == "10000") {
          this.loading = false;
          this.$emit("changeActiveKey", 1);
        }
      } else if (this.modalFlag == "edit") {
        this.chargesData.forEach((item) => {
          if (item.skuUnit == "单") {
            item.skuUnit = "0";
          } else if (item.skuUnit == "个") {
            item.skuUnit = "1";
          } else if (item.skuUnit == "年") {
            item.skuUnit = "2";
          } else if (item.skuUnit == "箱") {
            item.skuUnit = "3";
          } else if (item.skuUnit == "拖") {
            item.skuUnit = "4";
          } else if (item.skuUnit == "箱+拖") {
            item.skuUnit = "5";
          } else if (item.skuUnit == "件") {
            item.skuUnit = "6";
          } else if (item.skuUnit == "张") {
            item.skuUnit = "7";
          } else if (item.skuUnit == "立方厘米") {
            item.skuUnit = "8";
          } else if (item.skuUnit == "立方米") {
            item.skuUnit = "9";
          } else if (item.skuUnit == "G") {
            item.skuUnit = "10";
          } else if (item.skuUnit == "KG") {
            item.skuUnit = "11";
          } else if (item.skuUnit == "LB") {
            item.skuUnit = "12";
          } else if (item.skuUnit == "inch") {
            item.skuUnit = "13";
          } else if (item.skuUnit == "cm") {
            item.skuUnit = "14";
          } else if (item.skuUnit == "m") {
            item.skuUnit = "15";
          } else if (item.skuUnit == "oz") {
            item.skuUnit = "16";
          } else if (item.skuUnit == "柜") {
            item.skuUnit = "17";
          } else if (item.skuUnit == "天") {
            item.skuUnit = "18";
          } else if (item.skuUnit == "小时") {
            item.skuUnit = "19";
          }
        });

        let res = await cost_addOrEditRules(
          this.parentData.sysChargingSchemeId,
          3,
          this.chargesData
        );
        if (res.code == "10000") {
          this.loading = false;
          this.$emit("changeActiveKey", 1);
        }
      }
    },
    cancel() {
      this.$emit("cancel", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-table-tbody {
  .tab-handle {
    display: flex;
    justify-content: space-around;
  }
}
.footer {
  margin-top: 20px;
  border-top: 1px solid #e8e8e8;
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
